<template>
  <div class="cardBcontainer">
    <div
      class="cardBIcon"
      :style="{ backgroundImage: `url(${props.iconUrl})` }"
    ></div>
    <div class="cardBBtn">
      <btn_a :title="props.title" font-size="22px" />
    </div>
    <div class="cardBInfo">
      <p>{{ info }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import defaultIcon from "@/assets/png/info/icon1.png";
import btn_a from "../buttons/btn_a.vue";

const props = defineProps({
  iconUrl: {
    type: String,
    required: false,
    default: defaultIcon,
  },
  title: {
    type: String,
    required: false,
    default: "Test",
  },
  info: {
    type: String,
    required: false,
    default: "0",
  },
});

const info = ref(props.info);

defineExpose({
  info,
});
</script>

<style scoped lang="scss">
.cardBcontainer {
  @include relative_hw(199px, 185px);
  flex-direction: column;
  align-items: center;

  .cardBIcon {
    @include relative_hw(46px, 46px);
    background-size: cover;
    background-position: center;
    margin-top: 29px;
  }
  .cardBBtn {
    @include rel_cen_hw(30px, 88px);
    margin-top: 10px;
  }

  .cardBInfo {
    @include rel_cen_hw(41px, 84px);
    margin-top: 14px;
    p {
      font-family: "DIN Alternate-Bold";
      font-weight: Bold;
      font-size: 35px;
      color: #222222;
    }
  }
}
</style>
